<template>
    <n-modal
        ref="modalRef"
        preset="dialog"
        title="编辑"
        :close-on-esc="!loading"
        :mask-closable="!loading"
        v-model:show="showModel"
    >
        <Form
            ref="formRef"
            :items="formItems"
            :loading="loading"
            v-model:value="formState"
            style="margin-top: 20px"
        >
            <template #tool> </template>
        </Form>

        <template #action>
            <n-space>
                <n-button :disabled="loading" @click="showModel = false"
                    >取消</n-button
                >
                <n-button type="primary" @click="onConfirm" :loading="loading"
                    >确定</n-button
                >
            </n-space>
        </template>
    </n-modal>
</template>

<script setup lang="ts">
import { computed, PropType, ref, watchEffect } from 'vue'
import { Form, FormItemsConfig } from '@/components/form'
import { FormInst, MessageReactive, useMessage } from 'naive-ui'
import { ICoreApp, ICoreAppEditParameter } from '@/types/core/app'
import { appStateOptions, appTypeOptions } from '../options'
import { coreAppAdd, coreAppUpdate } from '@/apis/core/app'

const message = useMessage()

const emits = defineEmits<{
    success: []
    'update:show': [newValue: boolean]
}>()

const props = defineProps({
    data: {
        type: Object as PropType<ICoreApp>,
        required: false
    },
    show: {
        type: Boolean,
        default: () => false
    }
})

const showModel = computed({
    get: () => props.show,
    set: (val) => emits('update:show', val)
})

/**
 * 编辑
 */
const formRef = ref<FormInst | null>(null)
const formItems: FormItemsConfig<ICoreAppEditParameter> = [
    {
        field: 'type',
        label: '类型',
        component: 'RadioGroup',
        props: {
            options: appTypeOptions,
            'default-value': 'web',
            type: 'button'
        }
    },
    {
        field: 'name',
        label: '名称',
        component: 'Input',
        props: {
            placeholder: '应用名称',
            autofocus: true
        },
        rule: { required: true, min: 2, max: 20, trigger: ['input', 'blur'] }
    },
    {
        field: 'state',
        label: '状态',
        component: 'RadioGroup',
        props: {
            options: appStateOptions,
            'default-value': 1
        }
    },
    {
        field: 'remark',
        label: '备注',
        component: 'Input',
        props: {
            placeholder: '说点儿什么',
            type: 'textarea',
            autosize: true
        }
    }
]
const defaultState: ICoreAppEditParameter = {
    name: '',
    type: 'app',
    remark: '',
    state: 1
}
const formState = ref<ICoreAppEditParameter>({ ...defaultState })

watchEffect(() => {
    if (props.data) {
        formState.value = { ...props.data }
    } else {
        formState.value = { ...defaultState }
    }
})

const loading = ref(false)
function onConfirm() {
    loading.value = true
    let msg: MessageReactive | undefined = undefined
    formRef.value
        ?.validate()
        .then(() => {
            showModel.value = false

            msg = message.create('保存中...', {
                type: 'loading',
                duration: 100000
            })

            const API = formState.value.id ? coreAppUpdate : coreAppAdd
            return API(formState.value)
        })
        .then(() => {
            msg!.type = 'success'
            msg!.content = '保存成功'

            emits('success')
        })
        .catch((e) => {
            if (e.message) {
                msg!.type = 'error'
                msg!.content = e.message
            }
        })
        .finally(() => {
            loading.value = false
            setTimeout(() => {
                msg!.destroy()
            }, 2000)
        })
}
</script>
